<!-- 出库退货明细 -->
 <!-- JX出库明细 -->
<template>
    <div class="page-box">
        <div class="page-title">
            {{ '出库退货明细' }}
        </div>

        <div class="page-search">
            <div class="search-box" :style="{ height: IsHeight }">
                <el-input v-model="pageData.keywords" placeholder="出库单号/客户" style="width: 200px; margin-right: 10px"
                    suffix-icon="search" />
                <!-- 下拉选择 -->
                <el-select v-model="pageData.category" placeholder="产品名称" style="width: 200px; margin-right: 10px">
                    <el-option label="待提交" value="1"></el-option>
                    <el-option label="审核中" value="2"></el-option>
                </el-select>
                <!-- 时间选择 -->
                <div style="display: flex;align-items: center;width: 400px;margin-right: 10px;">
                    <el-date-picker type="datetimerange" range-separator="~" start-placeholder="开始时间"
                        end-placeholder="结束时间" style="width: 100px; margin-right: 10px" format="YYYY-MM-DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss" v-model="selectedDates" @change="handleDateChange"
                        :default-time="defaultTime1" />
                </div>
                <el-button>重置</el-button>
            </div>
            <div class="search-btn">
                <div class="btn_item" @click="handleClickHeight">
                    <img class="btn_img" src="@/assets/sx.png" alt="" />
                    <span> 高级筛选 </span>
                </div>
            </div>
        </div>
        <div class="search-btn-right">
            <el-button color="#626aef" type="primary" @click="handleClickAdd"> 新增 </el-button>
        </div>
    </div>

    <div class="table-box">
        <el-table :data="tabeData" style="width: 100%" v-loading="loading" border>
            <el-table-column align="center" prop="rowNumber" label="序号" width="auto" />
            <el-table-column align="center" prop="title" label="出库退货单" width="auto" />
            <el-table-column align="center" prop="house_type_name" label="出库退货日期" width="auto">
            </el-table-column>
            <el-table-column align="center" prop="category_name" label="客户" width="auto">
            </el-table-column>
            <el-table-column align="center" prop="carport_district_count" label="产品名称" width="auto" />
            <el-table-column align="center" prop="carport_parking_count" label="产品编号" width="auto" />
            <el-table-column align="center" prop="category_name" label="规格型号" width="auto" />
            <el-table-column align="center" prop="category_name" label="单位" width="auto" />
            <el-table-column align="center" prop="category_name" label="退货数量" width="auto" />
            <el-table-column align="center" prop="category_name" label="退货单价" width="auto" />
            <el-table-column align="center" prop="category_name" label="折扣" width="auto" />
            <el-table-column align="center" prop="category_name" label="整单折扣" width="auto" />
            <el-table-column align="center" prop="category_name" label="入库金额" width="auto" />
            <el-table-column align="center" prop="category_name" label="备注" width="auto" />
            <el-table-column fixed="right" label="操作" min-width="150" prop="id" align="center">
                <template #default="scope">
                    <div class="btn-box">
                        <el-button plain size="small" type="primary" @click="handleClick(scope.row)"> 编辑 </el-button>
                        <el-button plain size="small" type="danger" @click="handleClick(scope.row)"> 删除 </el-button>
                        <el-button plain size="small" type="success" @click="handleClickDetails(scope.row)"> 详情
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- 表格底部合计 -->
        <div class="table-footer">
            <div class="summary-item">出库数量合计 ：<span>{{ '2'
            }}</span></div>
            <div class="summary-item">出库金额合计（元）：<span>{{
                '4.00' }}（大写：肆元整）</span></div>
        </div>
    </div>
    <!-- 分页 -->
    <Pagination class="pagination" @pageSize="pageSize" @getPage="getPage" :page="pageData.page"
        :page-size="pageData.pageSize" :total="total" />

</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { usePlatformManagementStore } from "@/stores";
import Pagination from "@/components/Pagination.vue";
import AddOutboundOrder from "./components/AddOutboundOrder/AddOutboundOrder.vue";
import DetailsOutboundOrder from "./components/DetailsOutboundOrder.vue";
const platformManagementStore = usePlatformManagementStore();
const router = useRouter();
import api from "@/api";
//  新增出库
const AddedOutboundRef = ref<any>(null);
// 出库详情
let IsHeight = ref<number | string>(0);
// 定义ts数据
interface PageData {
    pageSize: number;
    page: number;
    house_type: string;
    category: string;
    keywords: string;
    start_datetime: string;
    end_datetime: string;
}
// 定义数据
const PageData = ref<PageData>({
    pageSize: 10,
    page: 1,
    house_type: "",
    category: "",
    keywords: "",
    start_datetime: "",
    end_datetime: "",
});
const handleDateChange = (val) => {
    pageData.value.start_datetime = val[0];
    pageData.value.end_datetime = val[1];
};
const defaultTime1 = ref([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]); // '12:00:00', '08:00:00'
// 日期的双向绑定去
const selectedDates = ref([]);
//  -----------------出库详情抽屉
// 监听 selectedDates 的变化
watch(selectedDates, (newVal) => {
    if (!newVal || newVal.length === 0) {
        pageData.value.start_datetime = "";
        pageData.value.end_datetime = "";
        init(); // 当 selectedDates 为空时重新加载数据
    }
});
//  出库详情
const DetailsOutboundOrderVisible = ref<boolean>(false);
// 定义仓库数据类型
interface Warehouse {
    id: string | number;
    title: string;
    code: string;
    house_type?: string;
    house_type_name?: string;
    category_name?: string;
    manager?: string;
    phone?: string;
    address?: string;
    remark?: string;
    parent_id?: string | number;
    parent_name?: string;
    children?: Warehouse[];
    create_time?: string;
    creator?: string;
    rowNumber?: number;
}
// 出库订单详情
let dialogRow = ref<Warehouse>({} as Warehouse);
//  -----------------列表数据
const pageData = ref({
    pageSize: 10,
    page: 1,
    house_type: "",
    category: "",
    keywords: "",
});
const total = ref(0);
const tabeData = ref([]);
// 侦听动态分页
watch(
    () => {
        return pageData.value;
    },
    () => {
        getAlltabeData();
    },
    { deep: true }
);

let nub = ref<number>(0);
const handleClickHeight = () => {
    nub.value++;
    if (nub.value % 2 == 1) {
        IsHeight.value = '50px';
    } else {
        IsHeight.value = '0px';
    }
}

const pageSize = (e: number) => {

    pageData.value.pageSize = e
}
const getPage = (e: number) => {
    pageData.value.page = e
}
onMounted(() => {
    getAlltabeData();
})

// 获取门店列表
const getAlltabeData = async () => {
    const res = await api.parking.getAll({
        ...pageData.value,
    });
    if (res.code == 0) {
        tabeData.value = res.data.data;

        total.value = res.data.total;
    }
};

const loading = ref(false);
//  新增出库
const handleClickAdd = () => {
    AddedOutboundRef.value.openLoading();
}

// 跳转区域管理
const handleClick = (row) => {
    platformManagementStore.setShopInfo(row);
    router.push({
        name: "RegionView",
    });
};

//  打开出库详情抽屉
const handleClickDetails = (row) => {
    DetailsOutboundOrderVisible.value = true;
    dialogRow.value = row;
}

</script>

<style lang="scss" scoped>
.btn-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

// 输入框样式
::v-deep .el-input__wrapper {
    background-color: rgba(250, 252, 251, 1);
}

//表格样式

::v-deep .el-table {
    --el-table-header-bg-color: rgba(235, 236, 240, 1);
}

::v-deep .el-table thead {
    color: #444;
}

//分页样式
.pagination {
    width: calc(100% - 250px);
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding-top: 10px;
    border-top: 1px solid #98989848;


}

::v-deep .el-pagination.is-background .el-pager li.is-active {
    background-color: #000 !important;
}

.table-footer {
    display: flex;
    justify-content: space-between;
    padding: 16px 0;
    color: #333;
    background-color: #f5f7fa;
    margin-top: 20px;
}
</style>
